<template>
	<view :style="myStyle">
		<view class="">
			<view class="imgflex">
				<view
					v-if="!isone"
					class="img"
					v-for="(item, index) in imgList"
					:key="index"
					:style="{ width: uupWith + 'rpx', height: uupHeight + 'rpx', borderRadius: uupBradius + 'rpx' }"
				>
					<image
						:style="{ width: uupWith + 'rpx', height: uupHeight + 'rpx', borderRadius: uupBradius + 'rpx' }"
						:src="item.url"
						mode="aspectFill"
						@click.stop="previewImage(index)"
					></image>
					<uni-icons @click.native.stop="remove(index)" v-if="maxCount > 1" class="icon" size="20" type="clear"></uni-icons>
					<image v-if="whyupload && maxCount == 1" @click.stop="upload" class="ads" src="/static/ads.png" mode=""></image>
				</view>
				<view
					v-if="imgList.length != maxCount || imgList.length == 0 || isone"
					class="upload"
					@click="upload"
					:style="{ width: uupWith + 'rpx', height: uupHeight + 'rpx', borderRadius: uupBradius + 'rpx' }"
				>
					<view v-if="isupload" class="" style="text-align: center">
						<uni-icons class="rotate" type="spinner-cycle" size="30" color="#D7D7DB"></uni-icons>
						<view class="" style="font-size: 24rpx; color: #d7d7db">上传中</view>
					</view>
					<view class="uimg" v-else>
						<image src="/static/xj.png" mode=""></image>
						<view class="">
							添加图片
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		whyupload: {
			type: Boolean,
			default: true
		},
		//改变文字
		uptext: {
			type: String,
			default: '上传图片'
		},
		upWith: {
			type: Number,
			default: 200
		},
		upHeight: {
			type: Number,
			default: 200
		},
		upBradius: {
			type: Number,
			default: 8
		},
		imgList: {
			type: Array,
			default() {
				return [];
			}
		},
		maxCount: {
			type: Number,
			default: 9
		}
	},
	name: 'imageUpload',
	data() {
		return {
			uupWith: this.upWith,
			uupHeight: this.upHeight,
			uupBradius: this.upBradius,
			isupload: false,
			isone: false
		};
	},
	methods: {
		previewImage(index) {
			if (this.imgList.length == 0) {
				return;
			}
			let plist = this.imgList.map((item) => {
				return item.url;
			});
			uni.previewImage({
				current: index,
				urls: plist,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function (data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function (err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		upload() {
			let that = this;
			uni.chooseImage({
				count: that.maxCount,
				success: (chooseImageRes) => {
					if (that.imgList.length == that.maxCount) {
						that.isone = true;
					}
					//拿到上传数组 循环上传
					let uploadList = chooseImageRes.tempFilePaths;
					uploadList.forEach((item) => {
						that.isupload = true;
						uni.uploadFile({
							url: 'https://www.daolangtongge.com/read-book-api/common/upload', // 后台上传接口
							filePath: item, // 上传图片 url
							name: 'file',
							header: {
								'Content-Type': 'multipart/form-data',
								Authorization: uni.getStorageSync('App-Token')
							},
							success(res) {
								let img = JSON.parse(res.data).url;
								if (that.imgList.length >= that.maxCount) {
									that.imgList[0].url = img;
								} else {
									that.imgList.push({
										url: img
									});
								}
								that.isupload = false;
								that.isone = false;
								that.reUpload();
							}
						});
					});
				}
			});
		},
		remove(index) {
			this.imgList.splice(index, 1);
			this.reUpload();
		},
		// 返回数据更新数组
		reUpload() {
			this.$emit('change', this.imgList);
		}
	}
};
</script>

<style lang="scss">
@keyframes rotates {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.rotate {
	display: block;
	animation: rotates 2s linear infinite;
}

.imgflex {
	display: flex;
	flex-wrap: wrap;

	.img {
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		.icon {
			position: absolute;
			top: -25rpx;
			right: -25rpx;
		}

		.ads {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			bottom: 0%;
			right: 0%;
		}
	}
}

.upload {
	background: #f6f6f6;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10rpx;
	.uimg {
		text-align: center;
		image {
			width: 48rpx;
			height: 48rpx;
		}
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #979797;
	}
}
</style>
